<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改用户头像')" />
	<th:block th:include="include :: cropbox-css" />
</head>
<body class="white-bg" style="margin-top:-10px">
<div class="container">
	<div>
		<img width="400px" height="400px" id="imageShow" src='/img/upload.jpg'>
		<form name="form" id="form" method="post" enctype="multipart/form-data"
			  action="/system/appResnetPic/add2" >
			<input id="fileName" type="text" name="fileName" style="visibility: hidden; display: none;" />
			<input type="file" name="upload" id="upload" style="display: none;"
				   onchange="document.form.path.value=this.value" multiple="multiple" accept=".bmp,.gif,.jpg,.jpeg,.png" />
			<input name="path" id="path" readonly>
			<input type="button" value="select local image" onclick="document.form.upload.click()">
		</form>
	</div>
	<!-- <div>
		<a type="button" id="filebutton" onclick="logoUpload.click()" class="btn btn-danger" th:text="#{nsfw.table.button.add}">选择本地jpg图片</a>
	</div> -->

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: cropbox-js" />
<script type="text/javascript">
	var cropper;
	var file123;
	function submitHandler() {
		var timestamp = (new Date()).valueOf();
		$("#fileName").val(timestamp+file123);
		//$("#form").submit();

		var prefix = ctx + "system/appResnetPic";
		var form = new FormData(document.getElementById("form"));
		$.ajax({
			url: prefix+'/add2',
			type: "post",
			data: form,
			processData: false,
			contentType: false,
			success: function(data) {
				console.log(data);

				$.ajax({
					url : prefix+'/add3',
					type : 'post',
					dataType : 'json',
					cache : false,
					data : {
						fileName : timestamp+file123
					},
					success : function(result) {
						/* var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        $.modal.reload();  */
						$.operate.saveSuccess(result);
					},
					error : function(XMLHttpRequest, textStatus, errorThrown) {
						alert("error");
					}
				})

			},
			error: function(e) {
				console.log(e);
			}
		});







	}

	$("#upload").change(function() {
		var file = this.files[0];
		var fileName = file.name.toLowerCase();
		var index = fileName.lastIndexOf(".");
		var fileExt = fileName.substring(index);//后缀名
		file123 = fileExt;
		var allowExt = ".jpg,.jpeg,.png,.bmp,.gif";
		if (allowExt.indexOf(fileExt) == -1) {
			alert('图片格式错误');
			return;
		}
		if (file.size >= 16 * 1024 * 1024) {
			alert('图片文件大小不能大于16M');
			return;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);//调用自带方法进行转换
		reader.onload = function(e) {
			$("#imageShow").attr("src", this.result);//将转换后的编码存入src完成预览
			//$("#imageBase64").val(this.result);//将转换后的编码保存到input供后台使用
		};
	});

</script>
</body>
</html>

